<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set value="<%=request.getContextPath()%>" var="ctx"></c:set>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8">
	<title>添加礼品</title>
	<meta name="keywords" content="关键字台">
    <meta name="description" content="描述"> 
    <link href="${ctx}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx}/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${ctx}/css/animate.css" rel="stylesheet">
    <link href="${ctx}/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="${ctx}/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
    <link href="${ctx}/um/themes/default/css/umeditor.css" rel="stylesheet"> 
</head>

<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
					<div class="ibox-title">
                        <div class="row">
                           <div class="col-sm-10">
                                <h3>添加礼品</h3>
                           </div>
                           <div class="col-sm-2">
                                <div class="ibox-tools">
									<a class="btn btn-success btn-block" style="color:#fff" href="${ctx}/giftManage/listGift">
									返回积分礼品列表
									</a>
                                </div>
                            </div>
                        </div>
                    </div>
         <div class="ibox-content">
	                            
				<form enctype="multipart/form-data" class="form-horizontal" id="addGiftInfo" method="post"
					action="${ctx}/giftManage/giftAdd">
					
					<div class="row">
                            <div class="col-sm-2"></div>
                            <div class="col-sm-8">
                            
						<div class="form-group">
							<label class="col-sm-4 control-label">商品名称：</label>
							<div class="col-sm-5">
								<input type="text" class="form-control" id="giftName" name="gift_name" placeholder="请输入商品名称" maxlength="50">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-4 control-label">价格：</label>
							<div class="col-sm-5">
								<input type="text" class="form-control" id="cost" name="cost" placeholder="请输入价格" maxlength="8">
							</div>
						</div>
	
						<div class="form-group" id="count" style="display:none;">
							<label class="col-sm-4 control-label">数量：</label>
							<div class="col-sm-5">
								<input type="text" class="form-control" id ="counts" name="count" value="0" maxlength="8">
							</div>
						</div>
	
						<div class="form-group" id="usedCount" style="display:none;">
							<label class="col-sm-4 control-label">剩余数量：</label>
							<div class="col-sm-5">
								<input type="text" class="form-control" id="remain_count" name="remain_count"
									value="0"> <span class="help-block m-b-none">*默认为0，可自定义初始值</span>
							</div>
						</div>
			
						<div class="form-group" id="moneys" style="display: none;">
							<label class="col-sm-4 control-label">红包金额（元）：</label>
							<div class="col-sm-5">
								<input type="text" class="form-control" id ="money" name="money" value="0">							
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-4 control-label">礼品介绍：</label>
							<div class="col-sm-5">
								<!-- <textarea type="text" class="form-control" id="giftDescribe" name="gift_describe"></textarea> -->
								<script type="text/plain" id="myEditor" style=""></script>
								
							</div>
						</div>
	
						
						<div class="form-group">
							<label class="col-sm-4 control-label">礼品图：</label>
	
							<div class="col-sm-5">
								<input type="file" name="fileImage" id="fileImage" accept="image/png,image/jpg,image/jpeg,image/gif,image/bmp"
									onchange='PreviewImage(this)' style="padding-top: 5px;" /> <input
									type="button" class="btn btn-danger btn-xs" value="移除"
									style="display: none;   margin-top: 10px;"
									onclick="removeImage(1)" id="removeImageBtn" />
									
							</div>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label"></label>
								<div class="col-sm-5">
									<p>*最佳展示效果需正方型图片，如：200*200; 图片名称不能超过20个字符;details_img</p>
								</div>
							</div>								
							
							<div class="form-group">
								<label class="col-sm-4 control-label"></label>
								<div class="col-sm-5">
									<div id="imgPreview" style="float: left"></div>
								</div>
							</div>
							
							<div class="form-group">
					
							<div class="form-group">
								<div class="col-sm-offset-7 col-sm-8">
									
								</div>
							</div>
						<div class="form-group">
							<label class="col-sm-4 control-label"></label>
							<div class="col-sm-5">
								<button class="btn btn-primary" type="button" onclick="addGiftInfo()">&#8194;添加&#8194;</button>
							</div>
						</div>
					  </div>
					</div>
				</form>
			
		</div>

				</div>
			</div>
		</div>
	</div>
	     <!-- 全局js -->
    <script src="${ctx}/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctx}/js/bootstrap.min.js?v=3.3.6"></script>
    <!-- 自定义js -->
    <script src="${ctx}/js/content.js?v=1.0.0"></script>
    <!-- jQuery Validation plugin javascript-->
    <script src="${ctx}/js/jquery.validate.min.js"></script>
     <script src="${ctx}/js/plugins/validate/messages_zh.min.js"></script>
	<script src="${ctx}/js/ajaxfileupload.js"></script>
    <script src="${ctx}/js/plugins/layer/layer.min.js"></script>
    <script src="${ctx}/js/plugins/toastr/toastr.min.js"></script>
    <script src="${ctx}/js/common.js"></script>
    <script src="${ctx}/js/plugins/layer/layer.min.js"></script>
    <script charset="utf-8" src="${ctx}/um/umeditor.js"> </script>
    <script charset="utf-8" src="${ctx}/um/umeditor.config.js"></script>
<script type="text/javascript">
		
$(function(){ 	
	 var um = UM.getEditor('myEditor');

	
	$('#giftType').change(function(){ 
		var temp = $(this).children('option:selected').val(); 
		if(temp!=2){
			/* $("#counts").val(0)
			$("#remain_count").val(0)
			$("#count").hide();
			$("#usedCount").hide(); */
			$("#money").val(0);
			$("#moneys").hide();
		}else{
			$("#moneys").show();
		}
		});
	
	$('#costType').change(function(){ 
		var temp = $(this).children('option:selected').val(); 
		if(temp==0){
			$("#probabilityArea").hide();
			$("#probability").val(0);
		}else{
			$("#probabilityArea").show();
		}
		});
	
	//添加礼品添加表单验证
	$("#addGiftInfo").validate({
		rules:{
			gift_name:{
				required:true,
				maxlength:50
			},
			cost:{
				required:true,
				digits:true
			},
			count:{
				required:true,
				digits:true
			},
			remain_count:{
				required:true,
				digits:true,
				balance:true
			},
			probability:{
				required:true,
				number:true,
				min : 0,
				max : 100
			},
			money:{
				required:true,
				digits:true,
				min : 1,
				max : 4999
			}
		},
		messages: {
			gift_name: {
                required: "请输入礼品名称",
                maxlength:"礼品名称不能超过30个字符"
            },
            cost: {
                required: "请输入耗费积分",
                digits:"必须为整数"
            },
            count: {
                required: "请输入数量",
                digits:"必须为整数"
            },
            remain_count: {
                required: "请输入剩余数量",
                digits:"必须为整数",
            },
            probability: {
            	required: "概率不能为空",
				number:"请输入大于等于0的数字",
				min : "最小值为不能低于0",
				max : "最大值不能超过100%"
            },
            money:{
				required:"红包金额不能为空",
				digits:"红包金额为整数",
				min : "红包金额大于等于1",
				max : "红包金额小于等于4999"
			}
		}
	});
	
	jQuery.validator.addMethod("balance", function(value,element) {
		var count=$("#counts").val();
		var remain_count=$("#remain_count").val();
		//alert(count-remain_count >=0);		
		return count-remain_count >=0; 
	}, $.validator.format("剩余数量不能大于输入总量"));
	
})
	toastr.options = {
			  "closeButton": false,
			  "debug": false,
			  "progressBar": false,
			  "positionClass": "toast-top-center",
			  "onclick": null,
			  "showDuration": "400",
			  "hideDuration": "1000",
			  "timeOut": "2000",
			  "extendedTimeOut": "1000",
			  "showEasing": "swing",
			  "hideEasing": "linear",
			  "showMethod": "fadeIn",
			  "hideMethod": "fadeOut"
			};

//新增信息
	function addGiftInfo(){			
			if($("#addGiftInfo").valid()){
				var formdata = new FormData($('#addGiftInfo')[0]);
				var gift_describe = UM.getEditor('myEditor').getContent();
				formdata.append('gift_describe',gift_describe);
				$.ajax({  
			       	url:'giftAdd',
			       	data: formdata,
				   	  type :"post",
				   	  processData: false,
				   	  contentType: false,
						success: function (result){
							if(result.state == 0){
								window.location.replace("listGift");
							}else{
								layer.msg(result.message);
							}
						},error: function(result){ 
							layer.msg("connection error");
							
			            }
					});
			}
	}

	function PreviewImage(imgFile) {
		var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;
		if (!pattern.test(imgFile.value)) {
			//$('#alertModal').modal('show')
			layer.msg("系统仅支持jpg/jpeg/png/gif/bmp格式的照片！") ;
			imgFile.focus();
			document.getElementById("fileImage").value = "";
		} else {
			var path;
			if (document.all)//IE 
			{
				imgFile.select();
				path = document.selection.createRange().text;
				document.getElementById("imgPreview").innerHTML = "";
				document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""
						+ path + "\")";//使用滤镜效果 
			} else//FF 
			{
				path = URL.createObjectURL(imgFile.files[0]);
				document.getElementById("imgPreview").innerHTML = "<img src='"+path+"' width='150px' height='100px'/>";
				document.getElementById("removeImageBtn").style.display = "";
				//document.getElementById("uploadImage").style.display = "none";
				//document.getElementById("imageDiv").style.display = "none";
				//document.getElementById("productImage").value = null;

			}
		}
	}

	function removeImage(sign) {
		if (sign == 1) {
			document.getElementById("imgPreview").innerHTML = "";
			document.getElementById("removeImageBtn").style.display = "none";
			document.getElementById("fileImage").value = "";
		} else {
			//document.getElementById("imageDiv").style.display = "none";
			//document.getElementById("productImage").value = null;
		}
	}
	
	function PreviewDetails_img(imgFile) {
		var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;
		if (!pattern.test(imgFile.value)) {
			//$('#alertModal').modal('show')
			layer.msg("系统仅支持jpg/jpeg/png/gif/bmp格式的照片！") ;
			imgFile.focus();
			document.getElementById("details_img").value = "";
		} else {
			var path;
			if (document.all)//IE 
			{
				imgFile.select();
				path = document.selection.createRange().text;
				document.getElementById("details_imgPreview").innerHTML = "";
				document.getElementById("details_imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""
						+ path + "\")";//使用滤镜效果 
			} else//FF 
			{
				path = URL.createObjectURL(imgFile.files[0]);
				document.getElementById("details_imgPreview").innerHTML = "<img src='"+path+"' width='320px' height='150px'/>";
				document.getElementById("removeDetails_imgBtn").style.display = "";
				//document.getElementById("uploadImage").style.display = "none";
				//document.getElementById("imageDiv").style.display = "none";
				//document.getElementById("productImage").value = null;

			}
		}
	}

	function removeDetails_img(sign) {
		if (sign == 1) {
			document.getElementById("details_imgPreview").innerHTML = "";
			document.getElementById("removeDetails_imgBtn").style.display = "none";
			document.getElementById("details_img").value = "";
		} else {
			document.getElementById("imageDiv").style.display = "none";
			document.getElementById("productImage").value = null;
		}
	}
</script>
</body>
</html>